<template>
	<!-- 红包兑换 -->
	<view class="main">
		<view>
			<view class="second">
				<image src="https://app.asy315.vip/s/m/images/query_img_cn.png" mode="widthFix" style="width: 100%;"
					@click="toAsy"></image>
				<view class="inputView">
					<u-form :model="form" ref="uForm" rules="rules" class="form">
						<u-form-item label=" " prop="code" label-width="0">
							<u-input v-model="form.code" placeholder="请输入防伪码" class="input" type="number" :border="true"
								border-color="#d0d0d0" height="60" />
						</u-form-item>
					</u-form>
					<u-button :custom-style="queryBtn" @click="search">
						<u-icon name="search"></u-icon>
					</u-button>
					<image src="https://app.asy315.vip/s/m/images/scan.png" mode="widthFix" style="width: 60rpx;"
						@click="scanCode(true)">
					</image>
				</view>
			</view>
			<view class="third">
				<view class="content" v-if="info.code.length>0">
					<view class="contentView" v-if="info.code.length>0">
						<view class="imgView">
							<image :src="imgSrc" mode="widthFix" :style="{'width': (imgWidth ? '100%':'50%')}"
								@click="preview"></image>
						</view>
						<view class="infoView">
							<view class="info">
								<view class="left">公司名称</view>
								<view class="right">{{info.customer.nameCn}}</view>
							</view>
							<view class="info" v-if="info.customer.phone">
								<view class="left">电话号码</view>
								<view class="right">
									<a style="color: rgb(41, 121, 255);text-decoration: none;"
										:href="'tel:' + info.customer.phone">{{info.customer.phone}}</a>
								</view>
							</view>
							<view class="info">
								<view class="left code">防伪码</view>
								<view class="right" v-if="info.code.length>0">
									<view class="info-line">
										<text v-for="(item,index) in info.code" :key="index"
											:class="item.class">{{item.value}}</text>
										<image v-if="isRight" src="https://app.asy315.vip/s/m/images/tick.png"
											mode="widthFix" class="check_icon">
										</image>
										<image v-else src="https://app.asy315.vip/s/m/images/cha.png" mode="widthFix"
											class="check_icon">
										</image>
									</view>
								</view>
							</view>
							<view class="info">
								<view class="left">公司网址</view>
								<view class="right">
									<u-link :href="info.customer.website">{{info.customer.website}}</u-link>
								</view>
							</view>
							<view class="info" v-for="(item,index) in extraInfo" :key="index">
								<view class="left">{{item.key}}</view>
								<view class="right">{{item.value}}</view>
							</view>
							<view class="info">
								<view class="left">查询时间</view>
								<view class="right" v-if="info.label.id">
									<view>{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}</view>
									<view>首次查询</view>
								</view>
								<view class="right" v-else>
									您查询的防伪码不存在
								</view>
							</view>
							<view class="info" v-if="info.label.queryTimes" @click="isShowQueryTimes=!isShowQueryTimes">
								<view class="left">查询次数</view>
								<view class="right" v-if="isRight">
									<view>{{info.label.queryTimes}}</view>
									<view style="margin-top: 30rpx;" v-show="isShowQueryTimes">
										<view v-if="info.label.queryTimes>1">
											该防伪码已被查询
											<text
												style="color: #1e9fff;margin: 0 10rpx;">{{info.label.queryTimes}}</text>
											次。首次查询时间: <text
												style="color: #1e9fff;margin: 0 10rpx;">{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}。</text>
											请注意，此防伪码已被多次查询, 谨防假冒!
											更多防伪知识请下载<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun</u-link>APP
										</view>
										<view v-else>
											当前查询为首次查询，查询时间: <text
												style="color: #1e9fff;margin: 0 10rpx;">{{info.label.firstTime | date('yyyy-mm-dd hh:MM:ss')}}。</text>
											更多防伪知识请下载<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun</u-link>APP
										</view>
									</view>
								</view>
								<view class="right" style="color: #ff2d2d;" v-else>
									该防伪码无效
								</view>
							</view>
							<view class="info" v-if="isShowCheck" @click="isShowCheckCode=!isShowCheckCode">
								<view class="left">防伪校验</view>
								<view class="right">
									<view class="info-line">
										<text v-for="(item,index) in checkCode" :key="index"
											:class="item.class">{{item.value}}</text>
										<image v-if="isRight" src="https://app.asy315.vip/s/m/images/tick.png"
											mode="widthFix" class="check_icon">
										</image>
										<image v-else src="https://app.asy315.vip/s/m/images/cha.png" mode="widthFix"
											class="check_icon">
										</image>
									</view>
									<view style="margin-top: 30rpx;" v-show="isShowCheckCode">
										{{info.checkCode}}
									</view>
								</view>
							</view>
							<view class="tips" v-if="isShowChekFlag&&isRight">
								<!-- <view class="left">二次校验</view> -->
								<view class="right">该防伪码支持二次校验，请下载“<u-link :href="appUrl" style="margin: 0 10rpx;">ASYun
									</u-link>”进行校验。</view>
							</view>
							<view class="videoView" v-if="videoSrc">
								<video :src="videoSrc" controls :autoplay="true"></video>
							</view>
						</view>
					</view>
					<!-- 				<view class="contentView" style="color: #154bc3;" v-else>
						请输入防伪码或者点击扫码按键进行防伪验证。
					</view> -->
				</view>
			</view>
			<view class="fourth">
				<image class="down" src="https://app.asy315.vip/s/m/images/download.png" mode="widthFix"
					style="width: 100%;" @click="download">
				</image>
				<view class="sw_view" v-if="sw_list.length>0&&sw_list.length!=1">
					<u-swiper :list="sw_list" duration="500" height="1300" img-mode="aspectFit"></u-swiper>
				</view>
				<image v-else :src="sw_list[0].image" mode="widthFix" style="width: 100%;margin-top: 40rpx;"></image>
			</view>
			<view class="fifth">
				<view class="title">
					<view class="left">关于我们</view>
					<!-- 				<view class="right">
						<image src="https://app.asy315.vip/s/m/images/xia.png" mode="widthFix" style="width: 30rpx;"></image>
					</view> -->
				</view>
				<view class="infoView">
					<view class="qr">
						<image src="https://app.asy315.vip/s/m/images/qr.png" mode="widthFix" style="width: 200rpx;">
						</image>
					</view>
					<view class="info">
						<view class="item">
							<view class="right">艾斯芸防伪科技有限公司</view>
						</view>
						<view class="item">
							<view class="right">电话：
								<!-- #ifdef H5 -->
								<a style="color: rgb(41, 121, 255);text-decoration: none;"
									href="tel:+86 15989366075">+86
									15989366075</a>
									<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text>+86 15989366075</text>
								<!-- #endif -->
							</view>
						</view>
						<view class="item">
							<view class="right">邮箱：
								<!-- #ifdef H5 -->
								<a style="color: rgb(41, 121, 255);text-decoration: none;"
									href="mailto:asy315@asy315.com">asy315@asy315.com</a>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text>asy315@asy315.com</text>
								<!-- #endif -->
							</view>
						</view>
						<view class="item">
							<view class="right">深圳市南山区粤海街道科发路3号中电长城大厦北塔1205</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				ICP备案编号：粤ICP备18119196号-1
			</view>
		</view>
		<u-popup v-model="showRedPack" mode="center" border-radius="14" width="80%">
			<view class="redPack">
				<image src="./static/images/bg.png" mode="widthFix" style="width: 100%;display: block;"></image>
				<image src="./static/images/open.png" mode="widthFix" class="open" v-show="showOpen"
					:class="{'animation':animation}" @click="receiveBtn"></image>
				<view class="bottom" v-if="!showOpen">
					<view class="money">
						￥{{money}}
					</view>
					<view class="moneytips">
						红包已存入微信零钱
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showExchange" mode="center" border-radius="14" width="88%" @open='popupOpen'
			class="exchangePop">
			<view class="exchangeView">
				<view class="exchangeConent">
					<image src="./static/images/redpack.png" mode="widthFix" style="width: 100%;display: block;">
					</image>
					<view class="exchangeForm">
						<view class="form-item">
							<input class="input" v-model="exchangeForm.code" />
						</view>
						<view class="form-item">
							<input class="input" placeholder="请输入校验码" v-model="exchangeForm.secret" />
						</view>
						<view style="text-align: center;" @click="check">
							<image src="static/images/redpackBtn.png" mode="widthFix" style="width: 200rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode'
	import toBaiduloglat from "@/common/translation.js"
	export default {
		data() {
			return {
				showRedPack: false,
				showExchange: false,
				animation: false,
				showOpen: true,
				form: {
					code: ''
				},
				rules: {
					code: [{
						required: true,
						message: '请输入防伪码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				},
				exchangeForm: {
					comcode: '',
					code: '',
					secret: ''
				},
				inputStyle: {
					borderRadius: '50px',
				},
				queryBtn: {
					backgroundColor: "#086B8B",
					color: "#fff",
					width: "64rpx",
					height: "64rpx",
					padding: "0",
					margin: "0 10rpx"
				},
				imgSrc: "",
				imgSrc1: [],
				info: {
					checkCode: "",
					customer: {
						nameCn: "",
						phone: "",
						website: "",
						applet: ""
					},
					label: {
						id: 0,
						queryTimes: "",
						firstTime: "",
						code: ""
					},
					code: [],
				},
				extraInfo: [],
				appUrl: "",
				sw_list: [{
					image: ""
				}],
				image2: [],
				formData: {
					code: "",
					ip: "",
					city: "",
					longitude: "",
					latitude: "",
					deviceInfo: "",
					querySource: "applet",
					mapType: 0
				},
				redpackData: {
					wxcode: '',
					comcode: '',
					appType: '1',
					code: ''
				},
				videoSrc: "",
				isShowChekFlag: false,
				// isShowPage: false,
				isShowCheck: true,
				isShowCheckCode: false,
				isShowQueryTimes: false,
				isRight: false,
				checkCode: "",
				imgWidth: false,
				money:''
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			// this.isShowPage = true
			if (option.q) {
				let url = decodeURIComponent(option.q)
				let str = this.getUrlCode('c', url)
				let pattern = /^\d+$/; // 匹配由一或多个数字组成的字符串
				if (pattern.test(str)) {
				  this.form.code = str
				  setTimeout(() => {
				  	this.search()
				  }, 500)
				}
			} else if (option.c){
				this.form.code = option.c
				if (this.form.code) {
					setTimeout(() => {
						this.search()
					}, 500)
				}
			}
			this.WeChatLogin()
		},
		methods: {
			// 微信code
			WeChatLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res);
						this.redpackData.wxcode = res.code
					}
				})
			},
			// 获取图片信息
			getImgInfo() {
				uni.getImageInfo({
					src: this.imgSrc,
					success: (image) => {
						if (image.width >= 400) {
							this.imgWidth = true
						} else {
							this.imgWidth = false
						}
					}
				});
			},
			scanCode(status) {
				this.$scan.scanCode(status).then(res => {
					this.form.code = res
					setTimeout(()=>{
						this.search(true)
					},500)
				})
			},
			search(status) {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({
							mask: true,
							title: "查询中..."
						})
						this.$u.api.labelQuery1(this.form).then(res => {
							if (res.status == 200) {
								uni.hideLoading()
								this.info.code = []
								this.imgSrc1 = []
								if (res.data.label.id == 0) {
									this.isRight = false
									this.info.label.id = res.data.label.id
									this.info.customer.nameCn = "无法找到"
									this.info.label.queryTimes = '';
									this.sw_list = [{
										image: ""
									}];
									this.videoSrc = ''
									this.isShowChekFlag = false;
									this.imgSrc = this.$u.http.config.baseUrl + '/' + res.data
										.batchImage
									this.imgSrc1.push(this.imgSrc)
									this.info.checkCode = ''
									let codeNum = this.form.code.split('')
									for (let i = 0; i <= codeNum.length; i++) {
										let obj = {
											value: codeNum[i],
											class: ""
										}
										this.info.code.push(obj)
									}
									let codeArr = this.$u.deepClone(this.info.code);
									for (let i = 0; i < codeArr.length; i++) {
										if (codeArr[i].class != "active") {
											codeArr[i].value = "x"
										}
									}
									this.checkCode = codeArr
									// this.isShowPage = true
								} else {
									if (res.data.isInvalid == 'true') {
										this.isRight = false
									} else {
										this.isRight = true
									}
									if (this.isRight) {
										if (res.data.customer.companyCode) {
											this.exchangeForm.comcode = res.data.customer.companyCode
											this.redpackData.comcode = res.data.customer.companyCode
										}
										if (res.data.label.subStatus == 2) {
											this.money = res.data.label.flag.split(':')[1]
											console.log(this.money);
											if (res.data.activityType) {
												this.showRedPack = true
											} else {
												this.showRedPack = false
												this.showExchange = true
											}
										}
									}
									this.info = res.data
									let code = []
									let codeNum = this.info.label.code.split('').reverse()
									for (let i = 1; i <= codeNum.length; i++) {
										if (i == this.info.checkCodeValue) {
											let obj = {
												value: codeNum[i - 1],
												class: "active"
											}
											code.push(obj)
										} else {
											let obj = {
												value: codeNum[i - 1],
												class: ""
											}
											code.push(obj)
										}
									}
									this.info.code = code.reverse()
									if (this.info.checkCodeValue) {
										this.isShowCheck = true
										let codeArr = this.$u.deepClone(this.info.code);
										for (let i = 0; i < codeArr.length; i++) {
											if (codeArr[i].class != "active") {
												codeArr[i].value = "x"
											}
										}
										this.checkCode = codeArr
									} else {
										this.isShowCheck = false
									}
									if (this.info.checkImage) {
										if (this.info.checkImage.length > 100) {
											this.imgSrc = "data:image/png;base64," + this.info
												.checkImage
										} else {
											this.imgSrc = this.$u.http.config.baseUrl + this.info
												.checkImage
										}
									} else {
										this.imgSrc = this.$u.http.config.baseUrl + '/' + res.data
											.batchImage
									}
									this.imgSrc1.push(this.imgSrc)
									if (this.info.appUrl) {
										this.appUrl = this.$u.http.config.baseUrl + this.info.appUrl
									} else {
										this.appUrl = this.$u.http.config.baseUrl + '/open/app'
									}
									if (this.info.product.image2) {
										this.sw_list = []
										let imagArr = this.info.product.image2.split(',')
										imagArr.forEach(v => {
											let obj = {
												image: this.$u.http.config.baseUrl + v
											}
											this.sw_list.push(obj)
										})
									}
									if (this.info.product.antiVideo) {
										this.videoSrc = this.info.product.antiVideo
									} else {
										this.videoSrc = ''
									}
									if (this.info.checkFlag == "true") {
										this.isShowChekFlag = true
									} else {
										this.isShowChekFlag = false
									}
									this.extraInfo = []
									if ('extra' in this.info) {
										let info = JSON.parse(this.info.extra.content)
										for (let i in info) {
											let obj = {}
											if (info[i].key && info[i].value) {
												obj.key = info[i].key
												obj.value = info[i].value
												this.extraInfo.push(obj)
											}
										}
										// this.extraInfo = JSON.parse(this.info.extra.content)
									} else {
										this.extraInfo = []
									}
								}
								this.getImgInfo()
								this.getLocation()
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			getLocation() {
				this.$location.location().then(res => {
					console.log(res);
					this.formData.longitude = res.longitude
					this.formData.latitude = res.latitude
					this.formData.ip = res.ip
					this.formData.city = res.city
					this.formData.deviceInfo = res.deviceInfo
					this.postUserLocation()
				}).catch(e => {
					console.log(e);
					this.formData.longitude = e.longitude
					this.formData.latitude = e.latitude
					this.formData.ip = e.ip
					this.formData.city = e.city
					this.formData.deviceInfo = e.deviceInfo
					this.postUserLocation()
				})
			},
			postUserLocation() {
				this.formData.code = this.form.code
				this.$postlocation.postLocation(this.formData)
			},
			preview() {
				uni.previewImage({
					current: 0,
					urls: this.imgSrc1,
					success: () => {},
					fail: () => {}
				});
			},
			receiveBtn() {
				this.redpackData.code = this.form.code
				this.animation = true
				this.$u.api.packetTransfer(this.redpackData).then(res => {
					if (res.status == 200) {
						this.animation = false
						this.showOpen = false
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'warning',
						})
						this.WeChatLogin()
					}
				})
			},
			check() {
				if (!this.exchangeForm.secret) {
					this.$refs.uToast.show({
						title: '请输入校验码',
						type: 'warning',
					})
					return
				}
				this.$u.api.miniSecretCheck(this.exchangeForm).then(res => {
					if (res.status == 200) {
						this.showExchange = false
						this.showRedPack = true
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				})
			},
			popupOpen() {
				this.exchangeForm.code = this.form.code
			},
			getUrlCode: function(name, url) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [,
					''])[1].replace(/\+/g, '%20')) || null
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;

		@media screen and (min-width: 480px) {
			.second {
				height: 1376rpx !important;
			}
		}

		.second {
			height: 480rpx;
			background-image: url(https://app.asy315.vip/s/m/images/bg.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: 0 -10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 100rpx;

			.query_img_b {
				margin: 14rpx 0 27rpx 0;
			}

			.inputView {
				width: 100%;
				display: flex;
				margin-top: 30rpx;

				.form {
					flex: 1;

					/deep/ .u-form-item {
						padding: 0;
						line-height: normal;
					}

					.input {
						background-color: #fff;
						width: 100%;
					}

					/deep/ .u-input {
						background-color: #fff;
						width: 100%;
					}
				}
			}
		}

		@media screen and (min-width: 480px) {
			.third {
				margin-top: -170rpx !important;
			}
		}

		.third {
			padding: 0 30rpx;
			margin-top: -60rpx;

			@media screen and (min-width: 480px) {
				.content {
					padding: 70rpx !important;
				}
			}

			.content {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 30rpx;
				box-shadow: 0px 4rpx 24rpx 0px rgba(0, 0, 0, .2);

				.itemView {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.item {
						text-align: center;
					}
				}

				.contentView {

					.imgView {
						text-align: center;
						margin-bottom: 40rpx;
					}

					.infoView {
						.info {
							display: flex;
							margin-bottom: 30rpx;
							padding-bottom: 30rpx;
							border-bottom: 1px dashed #636363;

							.left {
								// text-align: right;
								margin-right: 20rpx;
								font-size: 28rpx;
								color: #666;
								flex: 0.5;
								letter-spacing: 4rpx;
							}

							.right {
								flex: 1;
								text-align: right;
								padding-right: 30rpx;

								.active {
									background-color: #000;
									color: #fff;
									font-weight: bold;
								}

								.check_icon {
									width: 40rpx;
									margin-left: 20rpx;
								}
							}

							.info-line {
								display: flex;
								align-items: center;
								justify-content: flex-end;
							}
						}

						.tips {
							padding: 20rpx;
							text-align: center;
							color: #666;
							margin-bottom: 20rpx;
							// border-bottom: 1px dashed #636363;
						}

						.videoView {
							video {
								width: 100%;
								height: 300rpx;
							}
						}
					}
				}
			}
		}

		.fourth {
			padding: 60rpx 30rpx;

			.down {
				box-shadow: 0px 13px 25px 11px rgba(0, 0, 0, 0.11);
			}

			.sw_view {
				background: #FFFFFF;
				box-shadow: 0px 13px 25px 11px rgba(0, 0, 0, 0.11);
				border-radius: 30px;
				margin-top: 60rpx;
			}
		}

		.fifth {
			padding: 0 30rpx;
			text-align: center;

			.title {
				margin: 40rpx;
				font-weight: bold;
			}

			.infoView {

				.qr {
					margin-bottom: 30rpx;
				}

				.item {
					margin-bottom: 18rpx;
					color: #666;
				}
			}
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #333;
			padding: 30rpx;
			color: #fff;
			width: 100%;
		}

		.exchangeView {
			width: 100%;

			.exchangeConent {
				position: relative;

				.exchangeForm {
					position: absolute;
					left: 50%;
					bottom: 100rpx;
					transform: translate(-50%);

					.form-item {
						margin-bottom: 30rpx;
						background-color: #fff;
						border-radius: 50px;
						overflow: hidden;
						box-shadow: 0 12rpx 20rpx 10rpx rgba(0, 0, 0, .2);

						.input {
							height: 80rpx;
							width: 500rpx;
							text-align: center;
							font-size: 36rpx;
						}
					}
				}
			}
		}

		.redPack {
			position: relative;

			.open {
				width: 174rpx;
				position: absolute;
				bottom: 270rpx;
				left: 50%;
				margin-left: -87rpx;
			}

			.animation {
				animation: rotateY 1s linear 0.2s infinite;
				animation-iteration-count: 100;
			}

			.bottom {
				position: absolute;
				bottom: 80px;
				left: 50%;
				transform: translate(-50%);
				text-align: center;

				.money {
					font-size: 68rpx;
					color: #fae88d;
					animation: scale 0.2s linear;
				}

				.moneytips {
					color: #fae88d;
					margin-top: 30rpx;
				}
			}
		}
	}

	@keyframes rotateY {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(360deg);
		}
	}

	@keyframes scale {
		from {
			transform: scale(0);
		}

		to {
			transform: scale(1);
		}
	}

	/deep/ .exchangePop {
		.u-mode-center-box {
			background-color: transparent !important;
		}
	}
</style>